<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">基本信息</view>
		</view>
		<view class="main-content">
			<!-- <view class=""> 未来这里加入修改头像的功能 </view> -->
			<view class="vbox">
				<view class="func-item" @click="nofunc">
					<view class="item-name">账号：</view>
					<view class="item-content">123****1234</view>
					<view class="arrow"></view>
				</view>
				<view class="func-item" @click="nofunc">
					<view class="item-name">密码：</view>
					<view class="item-content">******</view>
					<view class="arrow"></view>
				</view>
			</view>
			
			<view class="vbox">
				<view class="func-item" @click="nofunc">
					<view class="item-name">微信账号</view>
					<view class="item-content"></view>
					<view class="arrow"></view>
				</view>
				<view class="func-item" @click="nofunc">
					<view class="item-name">QQ账号</view>
					<view class="item-content"></view>
					<view class="arrow"></view>
				</view>
			</view>
			
			<view class="vbox">
				<view class="func-item" @click="nofunc">
					<view class="item-name">注销账号</view>
					<view class="item-content"></view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			backPage() {
				uni.navigateBack();
			},
			nofunc() {
				uni.showToast({
					icon: 'none',
					title: '该功能暂未正式上线',
					duration: 1500
				});
			}
		}
	}
</script>

<style>
.vbox {
	margin: 5vmin 0;
    padding: 2vmin;
	box-shadow: 0 0 2vmin 0 rgba(0, 0, 0, 0.1);
	border-radius: 5vmin;
	font-size: 4vmin;
}

.func-item {
	width: 100%;
	height: 10vmin;
	display: flex;
	align-items: center;
	padding: 1vmin 0;
}

.item-name {
	padding-left: 4vmin;
}

.item-content {
	flex: 1;
}

.arrow {
    width: 10vmin;
    height: 100%;
    position: relative;
}

.arrow::after {
    width: 2vmin;
    height: 2vmin;
    content: "";
    display: block;
    border-top: 0.5vmin solid #666;
    border-right: 0.5vmin solid #666;
    position: absolute;
    top: 50%;
    right: 3vmin;
    transform: translateY(-50%) rotate(45deg);
}
</style>
